<template>
    <div>
        <div class="testBg relative">
            <div class="center subTitle fontSize18 fontbold relative flex alignCenter flexAround whiteBg">
                <img src="../../assets/image/flgs.png" class="flgs" />
                <img :src="resultInfo.img" class="people" />
                <div>
                    <div class="mb10">{{resultInfo.score}}({{resultInfo.name}})</div>
                    <div class="fontSize13 color999">测评结果</div>
                </div>
            </div>
            <div class="flagSty color666 fontSize12" @click="goCheck">类型&构面说明</div>
            <div class="gayBgS">
                <div class="center mb10 fontbold">岗位倾向调研{{resultInfo.position.length>0?'结果':''}}</div>
                <p class="center fontSize13 color666" v-if="resultInfo.position.length==0&&fromPage==''">请综合根据您的测评结果及岗位倾向，选择倾向岗位</p>
                <p v-if="resultInfo.position.length == 0&&fromPage!=''"  class="center fontSize13 color666">暂未选择</p>
                <!-- <div class="color333"  v-if="resultInfo.position.length > 0">
                    <div v-for='(item,index) in resultInfo.position' :key='index'><span class="color666">岗位倾向{{index+1}}：</span>{{item}}</div>
                </div> -->
                <div v-if="!isEdit">
                    <div v-if="resultInfo.position_data.position_1"><span class="color666">岗位倾向1：</span>{{resultInfo.position_data.position_1.name}}</div>
                    <div v-if="resultInfo.position_data.position_2"><span class="color666">岗位倾向2：</span>{{resultInfo.position_data.position_2.name}}</div>
                    <div v-if="resultInfo.position_data.position_3"><span class="color666">岗位倾向3：</span>{{resultInfo.position_data.position_3.name}}</div>
                    <div v-if="resultInfo.position_data.other"><span class="color666">其他岗位：</span>{{resultInfo.position_data.other.name}}</div>
                </div>
                <div v-if="fromPage=='' || isEdit">
                    <div v-if="resultInfo.position.length==0 || isEdit" class="mt10">
                        <van-field
                            class="borderRadiusLR"
                            v-model="fieldValue1"
                            is-link
                            readonly
                            label="岗位倾向1："
                            placeholder="请选择岗位"
                            @click="show1 = true"
                        />
                        <van-field
                            v-model="fieldValue2"
                            is-link
                            readonly
                            label="岗位倾向2："
                            placeholder="请选择岗位"
                            @click="show2 = true"
                        />
                        <van-field
                            v-model="fieldValue3"
                            is-link
                            readonly
                            label="岗位倾向3："
                            placeholder="请选择岗位"
                            @click="show3 = true"
                        />
                        <!-- <div  v-if="showOther" class="otherPostSty">
                            <span style="color:#646566" class="fontSize14">其他岗位倾向：</span>
                            <input type="text" placeholder="请填写岗位" class="ml10 aa" style="border: 1px #eee solid;width:60%;" v-model="otherPositionval"/>
                        </div> -->

                        
                        <van-field type="text" v-model="otherPositionval" label="其他岗位倾向:" placeholder="请填写岗位"/>
                        <van-field label="" value="" disabled />
                    </div>
                    <div class="flex flexCenter"  v-if="resultInfo.position.length==0">
                        <div class="testBtn whiteBg center colorfff fontSize15" @click="savePostSubmit">提交</div>
                    </div>
                </div>
                
                <div class="flex flexCenter"  v-if="resultInfo.position.length > 0">
                    <div class="testBtn whiteBg center colorfff fontSize15 mt20" @click='goEdit' v-if="!isEdit&&fromPage==''">重新选择</div>
                    <div class="cancelB center color999 fontSize15" v-if="isEdit" @click="getResult">取消</div>
                    <div class="testBtn whiteBg center colorfff fontSize15" v-if="isEdit" @click='savePostSubmit'>确定修改</div>
                </div>
                
                
            </div>
            <div class="contentAll pb10">
                <div class="mt20 pb5 mb10 fontbold btmGray">【总评】</div>
                <div class="fontSize13">
                    <p v-html="resultInfo.zongping"></p>
                </div>
                <div class="mt20 pb5 btmGray mb10 ">【性格优点】</div>
                <div class="fontSize13 color666">
                    <p v-html="resultInfo.youdian"></p>
                </div>
                <div class="mt20 pb5 btmGray mb10 ">【性格缺点】</div>
                <div class="fontSize13 color666">
                    <p v-html="resultInfo.quedian"></p>
                </div>
                <div class="mt20 pb5 btmGray mb10 ">【职业偏好】</div>
                <div class="fontSize13 color666">
                    <p v-html="resultInfo.pianhao"></p>
                </div>
                <div class="mt20 pb5 btmGray mb10 ">【职业角色指导】</div>
                <div class="fontSize13 color666">
                    <p v-html="resultInfo.zhidao"></p>
                </div>
            </div>
            
        </div>
        <van-popup v-model="showBox" style="width:95%;border-radius:0.1rem">
            <div style="padding:0.4rem 0.2rem">
                <img src="../../assets/image/close.png" class="close"  @click="goCheck"/>
                <div class="center mb10 fontbold">MBTI职业性格测评16种类型&构面解释</div>
                <div class="personalityList">
                    <!-- <ul class="flex flexWrap">
                        <li v-for='(item,index) in resultInfo.result' :key="index" class="flex alignCenter flexCenter" >
                            <div class="flex alignCenter">
                                <img :src="item.img" style="width:0.4rem;margin-right:0.06rem" />
                                <div>
                                    <div class="fontSize12 center">{{item.score}}</div>
                                    <div class="fontSize12">{{item.name}}</div>
                                </div>
                            </div>
                        </li>
                    </ul> -->
                    <van-swipe class="my-swipe" autoplay="false" indicator-color="#4873c1">
                        <van-swipe-item>
                            <ul class="flex flexWrap">
                                <li v-for='(item,index) in resultInfo.result' :key="index" class="flex alignCenter flexCenter"  @dragstart.prevent>
                                    <div class="flex alignCenter">
                                        <img :src="item.img" style="width:0.5rem;margin-right:0.06rem" />
                                        <div>
                                            <div class="fontSize12 center">{{item.score}}</div>
                                            <div class="fontSize12">{{item.name}}</div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </van-swipe-item>
                        <van-swipe-item>
                            <ul class="flex flexWrap">
                                <li v-for='(item,index) in resultInfo.translateArr' :key="index" class="flex alignCenter flexCenter" >
                                    <div class="flex alignCenter">
                                        <img :src="item.img" style="width:0.5rem;margin-right:0.06rem" />
                                        <div>
                                            <div class="fontSize12 center">{{item.score}}</div>
                                            <div class="fontSize12">{{item.name}}</div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </van-swipe-item>
                        
                    </van-swipe>
                </div>
                <div class="fontSize12" style="border-top:1px #666 dashed;padding-top:0.2rem">
                    <p>E(外向) — I(内向) ：注意力方向，指向我们从何处获得能量；</p>
                    <p>S(感觉) — N(直觉) ：认知方式，指向我们如何搜集信息；</p>
                    <p>T(理性) — F(感性) ：判断方式，指向我们如何做决定；</p>
                    <p>J(判断) — P(知觉) ：生活方式，指向我们如何应对外部世界。</p>
                </div>
                <div class="fontSize12 color999 mt5">MBTI职业性格测评将辅助您更好了解自己的职业优劣势，但测评结果受到作答过程及作答环境影响，因此测评结果仅做参考。</div>
            </div>
        </van-popup>
        <van-popup v-model="show1" round position="bottom">
            <van-cascader
                v-model="cascaderValue1"
                title="请选择岗位"
                :options="positionList"
                :field-names="fieldNames"
                @close="show1 = false"
                @finish="onFinish1"
                
            />
        </van-popup>
        <van-popup v-model="show2" round position="bottom">
            <van-cascader
                v-model="cascaderValue2"
                title="请选择岗位"
                :options="positionList"
                :field-names="fieldNames"
                @close="show2 = false"
                @finish="onFinish2"
            />
        </van-popup>
        <van-popup v-model="show3" round position="bottom">
            <van-cascader
                v-model="cascaderValue3"
                title="请选择岗位"
                :options="positionList"
                :field-names="fieldNames"
                @close="show3 = false"
                @finish="onFinish3"
            />
        </van-popup>
    </div>
</template>
<script>
import {Toast,Empty,Dialog} from 'vant';
export default {
    name:'result',
    data(){
        return {
            resultInfo:{
                result:[],
                translateArr:[],
                position_data:[]
            },
            id:'',
            showBox:false,
            show1: false,
            show2: false,
            show3: false,
            fieldValue1: '',
            fieldValue2:'',
            fieldValue3:'',
            cascaderValue1: '',
            cascaderValue2:'',
            cascaderValue3:'',
            // 选项列表，children 代表子选项，支持多级嵌套
            options: [
                {
                text: '浙江省',
                value: '330000',
                children: [{ text: '杭州市', value: '330100' }],
                },
                {
                text: '江苏省',
                value: '320000',
                children: [{ text: '南京市', value: '320100' }],
                },
            ],
            positionList:[],
            fieldNames: {
                text: 'name',
                value: 'id',
                children: 'childlist',
            },
            postidList:[],
            otherPositionval:'',
            showOther:true,
            isEdit:false,
            // positionData:{}
            fromPage:''
        }
    },
    created(){
        let id=this.$route.query.id
        id?this.id=id:this.id=''
        let fromPage = this.$route.query.fromPage
        fromPage?this.fromPage=fromPage:this.fromPage=''
        console.log('fromPage',this.fromPage)
        this.getResult()
        let isFMBTI=localStorage.getItem('isFMBTI')
        if(isFMBTI==null){
            this.showBox=true
            localStorage.setItem('isFMBTI',1)
        }
        this.getPostList()
    },
    methods:{
        getResult(){
            let that=this
            Toast.loading({
                message: '加载中',
            })
            this.$apiRequest.getResultmbti({admin_id:this.id}).then(res=>{
                console.log('评测结果',res)   //status: 1-已答题  2-未答题
                Toast.clear()
                if(res.code==1){
                    this.isEdit=false
                    this.resultInfo=res.data
                    this.resultInfo.translateArr=res.data.result.splice(9,res.data.result.length - 1)
                    // this.resultInfo.result.length=9
                    // this.positionData=this.resultInfo.position_data
                    console.log('this.resultInfo',this.resultInfo)
                }else{
                    Toast(res.msg)
                }
            })
        },
        goCheck(){
            this.showBox=!this.showBox
        },
        getPostList(){
            this.$apiRequest.getPostList({}).then(res=>{
                console.log('职位列表',res)
                if(res.code==1){
                    res.data.position.map(i=>{
                        if(i.childlist.length==0){
                            i.childlist=false
                        }else{
                            i.childlist.map(v=>{
                                if(v.childlist.length==0){
                                    v.childlist=false
                                }else{
                                     v.childlist.map(s=>{
                                        s.childlist=false
                                     })
                                }
                            })
                        }
                    })
                    this.positionList=res.data.position
                }
            })
        },
        onFinish1({selectedOptions}){
            this.show1=false
            this.fieldValue1 = selectedOptions.map((option) => option.name).join('/');
            this.postidList.push(this.cascaderValue1)
            this.checkLen()
        },
        onFinish2({selectedOptions}){
            this.show2=false
            this.fieldValue2 = selectedOptions.map((option) => option.name).join('/');
            this.postidList.push(this.cascaderValue2)
            this.checkLen()
        },
        onFinish3({selectedOptions}){
            this.show3=false
            this.fieldValue3 = selectedOptions.map((option) => option.name).join('/');
            this.postidList.push(this.cascaderValue3)
            console.log('postidList',this.postidList)
            this.checkLen()
        },
        checkLen(){
            if(this.postidList.length==3){
                // this.showOther=false
            }
        },
        savePostSubmit(){
            let that=this
            // if(this.postidList.length==0){
            //     Toast('请选择2-3个职位')
            //     return
            // }else{
            //     if(this.postidList.length<=1&&this.otherPositionval==''){
            //         Toast('请选择2-3个职位')
            //         return
            //     }
            //     if(this.postidList.length==3&&this.otherPositionval!=''){
            //         Toast('选择2-3个职位即可')
            //         return
            //     }
            // }
            // if(this.fieldValue1==''){
            //     Toast('请填写岗位倾向1')
            //     return
            // }
            // if(this.fieldValue2==''){
            //     Toast('请填写岗位倾向2')
            //     return
            // }
            // if(this.postidList.length==3&&this.otherPositionval!=''){
            //     Toast('选择2-3个职位即可')
            //     return
            // }
            if(this.cascaderValue1==''&&this.cascaderValue2==''&&this.cascaderValue3==''&&this.otherPositionval==''){
                Toast('至少选择1个职位')
                return
            }

            Dialog.confirm({
                title: '提示',
                message: '确定提交吗?',
            })
            .then(() => {
                // on confirm
                that.goSubmit()
            })
            .catch(() => {
                // on cancel
            });
            
        },
        goSubmit(){
            let that=this
            let obj={
                // id:this.postidList,
                id_1:this.cascaderValue1,
                id_2:this.cascaderValue2,
                id_3:this.cascaderValue3,
                other:this.otherPositionval
            }
            console.log('参数',obj)
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                overlay:true
            });
            this.$apiRequest.savePostSubmit(obj).then(res=>{
                console.log('提交状态',res)
                Toast.clear()
                if(res.code==1){
                    Toast('提交成功')
                    that.isEdit=false
                    setTimeout(()=>{
                        that.getResult()
                    },1500)
                    that.postidList=[]
                    that.otherPositionval=[]
                    that.fieldValue1=''
                    that.fieldValue2=''
                    that.fieldValue3=''
                }else{
                    Toast(res.msg)
                }

            })
        },
        goEdit(){
            this.isEdit=!this.isEdit
            let positionData=this.resultInfo.position_data
            // console.log('positionData',2)
            this.cascaderValue1= positionData.position_1?positionData.position_1.id:''
            this.cascaderValue2= positionData.position_2?positionData.position_2.id:''
            this.cascaderValue3= positionData.position_3?positionData.position_3.id:''
            this.fieldValue1= positionData.position_1?positionData.position_1.name:''
            this.fieldValue2= positionData.position_2?positionData.position_2.name:''
            this.fieldValue3= positionData.position_3?positionData.position_3.name:''
            this.otherPositionval=positionData.other?positionData.other.name:''
        },
        goCancel(){
            // this.getResult()
        }
    }
}

</script>
<style>
.van-swipe__indicators{
    bottom: 0 !important
}
.van-swipe__indicator{
    background-color: #666 !important;
}
/* .van-popup--center{top: 50% !important;} */
.testBg .van-cell{
    background-color: rgba(255,255,255,0) !important
}
.testBg .van-field__label{
    width: 6.4em !important;
}
</style>
<style lang="less" scoped>
.testBg /deep/.van-field__control::-webkit-input-placeholder {
    color: #888;
}
.testBg{
    background-image: linear-gradient(#4873c1,white);
    // background-color: #4873c1;
    padding: 1rem 0 0 0;
    height: 100vh;
    .flagSty{
        position: fixed;
        top: 5.5rem;
        right: 0;
        // background: rgba(255,255,255,0.3);
        background-color: #b9c6e6;
        padding: 0.06rem 0.1rem;
        border-radius: 0.1rem 0 0 0.1rem;
        z-index: 9;
    }
    .subTitle{
        border:0.1rem #edf0f3 solid;
        padding: 0.4rem 0.2rem 0.2rem 0.2rem;
        width: 90%;
        margin: 0 auto;
        color: #f57e28;
        border-radius: 0.1rem;
        .flgs{
            position: absolute;
            top: -0.8rem;
            left:50%;
            transform: translateX(-50%);
        }
        .people{
            width: 2.4rem;
        }
    }
    .contentAll{
        width: 90%;
        margin: 0 auto;
    }
    .btmGray{border-bottom: 1px #666 dashed;}
    .pb5{padding-bottom: 0.1rem;}
    .gayBgS{
        // background-color: #eee;
        border: 1px #ddd solid;
        padding: 0.4rem 5% 0.4rem 5%;
        width: 90%;
        margin: 0.4rem auto;
        border-radius: 0.1rem;
        .borderRadiusLR{
            // border-radius: 0.1rem 0.1rem 0 0;
        }
    }
}
.testBtn{
    background-color: #789ad9;
    width: 2.8rem;
    height: 0.7rem;
    line-height: 0.7rem;
    border-radius: 0.6rem;
}
.cancelB{
    width: 2.8rem;
    border:1px #999 solid;
    border-radius: 0.6rem;
    height: 0.7rem;
    line-height: 0.7rem;
    margin-right: 0.4rem;
}
.close{
    width: 0.4rem;
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
}
.personalityList{
    // max-height: 4rem;
    // overflow: scroll;
    padding-bottom: 0.2rem;
    ul{
        padding-bottom: 0.1rem;
        li{
            // height: 1rem;
            width: 33.33%;
            // border:1px #eee solid;
            padding: 0.24rem 0;
        }
    }
}
input{
    -webkit-appearance:none;
    background-color: rgba(255,255,255,0) !important
}
.otherPostSty{
    width: 90%;
    padding: 0.2rem 0;
    border-bottom: 1px solid #ededed;
    margin: 0 auto;
    input{
        border:none !important;
        border-bottom: 1px #eee solid;
        box-sizing: border-box;
    }
}

</style>